题 目:简单!用Flash制作Flv播放器攻略!之:三、插入播放进度条
前两部分我们学会了如何播放,控制视频等等,现在需要什么呢?既然是flv是流媒体,为了是播放器显得更人性化,现在还缺少一个Video加载的进度条。还等什么,赶快一起动手吧。
首先,我们在层controlBar新建一个图层名为:loader,将笔触颜色设置为黑色,填充设置为白色,用矩形工具绘制一个进度条如图6。
|
图6 插入播放进度条 |
然后我们选择该矩形并按F8将其转换成一个名为loader的影片剪辑,并且将场景中该元件的实例名也命名为loader,设置Alpha值为60%。双击进入该影片剪辑的编辑状态,选择中间白色的填充,按F8转换名为loadBar的影片剪辑,并命名该元件的实例名为loadBar。
然后返回场景,选择action层的第一帧输入以下代码:
//和平时见到的swf loading都差不多,这里我就不多解释了
var percent_Loaded:Number = 0;
loader.loadBar._xscale = percent_Loaded;
//创建一个videoStatus函数
function videoStatus(){
var videoTotal:Number = ns.bytesTotal;
var videoLoaded:Number = ns.bytesLoaded;
percent_Loaded = videoLoaded /videoTotal*100;
loader.loadBar._xscale = percent_Loaded;
}
//创建一个计时器,每隔100毫秒执行一次videoStatus函数
var videoInterval = setInterval(videoStatus,100); |
从现在开始,我们开始进入中级阶段,制作Video的进度滑块。双击进入元件loader的编辑状态,新建一层名为:scrub,,然后我们绘制一个滑块如图7。
|
图7 Flash中插入进度滑块 |
按F8将其转换为元件,转换的时候注意将注册点选择为中上,千万别选错了哦。并将其实例名命名为:scrub。将其和loadBar对齐如图8。
图8 Flash中对齐元件
|
下面我们来制作播放进度条,在scrub层上新建一个图层名为playBar,将层loadBar上的元件loadBar选中,按下Ctrl+C复制,然后选择层playBar,按Ctrl+Shift+V原位粘贴,更改其实例名为playBar,并将其属性设置如图9。
|
图9 Flash颜色调板 |
返回主场景,选择action层的第一帧输入以下代码:(注意更新的代码是红色,旧的代码是黑色)
var percent_Loaded:Number = 0;
loader.loadBar._xscale = percent_Loaded;
loader.playBar._xscale = 0;
var duration:Number;
//这里可以查看帮助文档中NetStream.onMetaData 处理函数
//duration获取影片的长度
ns.onMetaData = function(obj:Object){
duration = obj.duration;
};
function videoStatus(){
var videoTotal:Number = ns.bytesTotal;
var videoLoaded:Number = ns.bytesLoaded;
percent_Loaded = videoLoaded /videoTotal*100;
loader.loadBar._xscale = percent_Loaded;
loader.scrub._x = ns.time / percent_Loaded * loader.loadBar._width;
loader.playBar._xscale = ns.time / percent_Loaded *100;
}
var videoInterval = setInterval(videoStatus,100); |
好,现在我们Ctrl+Enter测试下影片,怎么样,滑块跟随着播放时间的流逝在移动了吧。
|